<template>
	<view>
		<!-- <view class="topBg"></view> -->
		<view class="content">
			<!-- <scroll-view scroll-y="true" style="height: 100vh;"> -->
			<scroll-view scroll-y="true" style="height: 100%;">
				<view class="title-box" style="position: relative;">
					<image class="img" :src="imgUrl" @click="image"></image>
					<image class="litter-img" :src="$img('/static/2021-08-30/20f4048b9b1e1334576c42c09741819.png')"></image>
					<!-- <view class="img-text">请上传真实、正面、清晰的照片</view> -->
				</view>
				<view class="name">
					<image class="name-left" src="../../static/pages/shoujihao.png"></image>
					<view class="name-right"><input :auto-blur="true" @focus="imgNone" @blur="imgShow" class="name-text" placeholder="请输入您的手机号" type="number" maxlength="11" v-model="phone" /></view>
				</view>
				<view class="name">
					<image class="name-left" src="../../static/pages/verificationCode.png"></image>
					<view class="name-right"><input :auto-blur="true" @focus="imgNone" @blur="imgShow" class="name-text" placeholder="请输入验证码" type="number" maxlength="11" v-model="verificationCode" /></view>
					<view @click="getVerificationCode" disables class="verificationCodeBtn">
						{{vfcBtn}}
					</view>
				</view>
				<view class="name">
					<image class="name-left" src="../../static/pages/mima.png"></image>
					<view class="name-right"><input :auto-blur="true" @focus="imgNone" @blur="imgShow" class="name-text" placeholder="请输入您的密码" password v-model="password" /></view>
				</view>
				<view class="name">
					<image class="name-left" src="../../static/avatar.png"></image>
					<view class="name-right"><input :auto-blur="true" @focus="imgNone" @blur="imgShow" class="name-text" placeholder="请填写您的昵称" v-model="name" /></view>
				</view>
				<view class="sex name">
					<image class="name-left" src="../../static/avatar.png"></image>
					<view class="name-right"><input :auto-blur="true" @focus="imgNone" @blur="imgShow" class="name-text" placeholder="请选择您的性别" v-model="garden" disabled /></view>
					<view class="classify">
						<view :class="[curSex == 2 ? 'curSex' : '', 'sexAll']" @click="getGarden(2)">
							<image style="width: 26rpx;height: 26rpx;" v-if="curSex != 2" src="../../static/pages/female.png" mode="" />
							<image style="width: 26rpx;height: 26rpx;" v-else-if="curSex == 2" src="../../static/pages/female-after.png"
							 mode="" />
							<view :class="curSex ==2? 'classify-text-after' :'classify-text'">女</view>
						</view>
						<view :class="[curSex == 1 ? 'curSex' : '', 'sexAll']" @click="getGarden(1)">
							<image style="width: 26rpx;height: 26rpx;" v-if="curSex != 1" src="../../static/pages/male.png" mode="" />
							<image style="width: 26rpx;height: 26rpx;" v-else-if="curSex == 1" src="../../static/pages/male-after.png" mode="" />
							<view :class="curSex ==1? 'classify-text-after' :'classify-text'">男</view>
						</view>
					</view>
				</view>
				<view class="name">
					<image class="name-left" src="../../static/avatar.png"></image>
					<view class="name-right age-right">
						<view class="age-text">
							<picker @change="bindPickerChange" :value="index" :range="array">
								<view v-if="index == 0" class="uni-input1">{{ array[index] }}</view>
								<view v-else class="uni-input">{{ array[index] }}</view>
							</picker>
						</view>
						<!-- <view class="blank1" style="margin-top: 15rpx;"></view> -->
					</view>
				</view>
				<view class="hint ">性别选定后不可更改<span style="color:rgba(23, 162, 249, 1);">请谨慎操作</span></view>
				<view @click="zhuce" :class="[index != 0 && imgUrl != '../../static/pages/photo.png' && password && phone && name ? 'activeSave' : '', 'save']">
					<span class="save-text">注册</span>
				</view>
			</scroll-view>
			<image :src="$img('/static/2021-08-30/5676eb0585ecbd7e2a7ffd198cde3bf.png')" class="top-img" mode="widthFix"></image>
			<image :src="$img('/static/2021-08-30/02e467e26fcb6dfd3e3499b5dfee052.png')" class="bottom-img" mode="widthFix" v-if="imgIsShow">
		<!-- <image src="/static/topBg.png" class="top-img" mode="widthFix"></image> -->
		<!-- <image src="/static/registerBottom.png" class="bottom-img" mode="widthFix" v-if="imgIsShow"></image> -->
		</view>
		<!-- <view class="buttomBg"></view> -->
		<image-cropper :crop-fixed="true" :src="url" @confirm="confirm" @cancel="cancel"></image-cropper>
	</view>
</template>

<script>
	import ImageCropper from "@/components/invinbg-image-cropper/invinbg-image-cropper.vue";
	export default {
		components: {
			ImageCropper
		},
		data() {
			return {
				// img:'http://localhost:8080/8aea2725-8fe4-4bd3-950b-979c324a1eec',
				verificationCode: '',
				imgUrl: '../../static/pages/touxiang@21x.png',
				phone: '',
				name: '',
				password: '',
				avatar: [],
				array: [
					'请选择您的年龄',
					'15',
					'16',
					'17',
					'18',
					'19',
					'20',
					'21',
					'22',
					'23',
					'24',
					'25',
					'26',
					'27',
					'28',
					'29',
					'30',
					'31',
					'32',
					'33',
					'34',
					'35',
					'36',
					'37',
					'38',
					'39',
					'40'
				],
				index: 0,
				curSex: -1, //1男  2 女
				garden: '',
				male: "../../static/pages/male.png",
				maleAfter: "../../static/pages/male-after.png",
				female: "../../static/pages/female.png",
				femaleAfter: "../../static/pages/female-after.png",
				vfcBtn: '获取',
				countDown: 60,
				timer: '',
				getBtn: true,
				url: "",
				imgIsShow:true,
			};
		},
		watch: {
			vfcBtn(nval, oval) {
				if (nval == 0) {
					clearInterval(this.timer)
					this.vfcBtn = '获取'
					this.getBtn = true
				}
			}
		},
		methods: {
			imgNone(){
				this.imgIsShow = false;
			},
			imgShow(){
				this.imgIsShow = true;
			},
			getStartCountDown() {
				this.getBtn = false
				this.vfcBtn = this.countDown
				this.timer = setInterval(() => {
					this.vfcBtn--
				}, 1000)
			},
			async getVerificationCode() {
				await this.getPhone()
				if (this.getBtn == true) {
					this.getStartCountDown()
					uni.request({
						url: this.$utils.domain + "/api/captcha",
						method: "POST",
						data: {
							mobile: this.phone
						},
						success: res => {
							uni.showToast({
								title: "已发送",
								icon: "none"
							})
						}
					})
				}
			},
			getPhone() {
				return new Promise((resolve, reject) => {
					if (!this.phone) {
						reject(false)
						uni.showModal({
							content: "请输入手机号码"
						})
					} else(
						resolve(true)
					)
				})
			},
			getGarden(num) {
				this.curSex = num
				this.garden = (num == 1 && "男") || "女"
			},
			bindPickerChange: function(e) {
				// console.log('picker发送选择改变，携带值为', e.target.value);
				this.index = e.target.value;
			},
			image() {
				let that = this;
				uni.chooseImage({
					success: chooseImageRes => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						that.url = tempFilePaths[0]
					}
				});
			},
			zhuce() {
				let that = this;
				if (that.avatar.length == 0) {
					that.$utils.showLayer('请选择头像');
					return;
				}
				// if (that.captcha == '') {
				// 	that.$utils.showLayer('请填获取验证码');
				// 	return;
				// }
				if (that.phone == '') {
					that.$utils.showLayer('请填写手机号');
					return;
				}
				if (that.phone.length < 11) {
					that.$utils.showLayer('请填写正确手机号');
					return;
				}
				if (that.password == '') {
					that.$utils.showLayer('请填写密码');
					return;
				}
				if (that.name == '') {
					that.$utils.showLayer('请填写昵称');
					return;
				}
				if (that.index == 0) {
					that.$utils.showLayer('请选择年龄');
					return;
				}
				let paramData = {
					mobile: that.phone,
					password: that.password,
					nickname: that.name,
					nickname: that.name,
					sex: that.curSex + '',
					avatar: JSON.stringify(that.avatar),
					age: that.array[that.index],
					captcha: that.verificationCode
				};
				this.$utils.postrequest('/api/register', paramData, function(res) {
					if (res.code == 200) {
						that.$utils.showLayer('注册成功，去登录');
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 800);
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				});
			},
			confirm(e) {
				this.url = ''
				this.imgUrl = e.detail.tempFilePath
				uni.uploadFile({
					url: this.$utils.domain + '/api/upload', //仅为示例，非真实的接口地址
					filePath: this.imgUrl,
					name: 'file',
					success: res => {
						if (res.statusCode == 200) {
							this.avatar = [];
							let ress = JSON.parse(res.data);
							if (ress.code == 200) {
								this.imgUrl = ress.data;
								this.avatar.push(ress.data);
								// console.log('res', ress.data);
							}
						}
					}
				});
			},
			cancel() {
				this.url = ''
			},
		}
	};
</script>

<style scoped>
	page {

		/* position: relative; */
		/* height: 100vh; */
		width: 100%;
		overflow: hidden;
	}
	.top-img{
		width: 100%;
		position: absolute;
		right: 0;
		top: 0;
		z-index: -1;
	}
	.bottom-img{
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: -1;
	}
	.topBg {
		background-image: url(../../static/topBg.png);
		height: 334rpx;
		width: 100%;
		background-size: cover;
		position: relative;
		z-index: -1;
	}

	.buttomBg {
		position: absolute;
		bottom: 0;
		background-image: url(../../static/registerBottom.png);
		height: 170rpx;
		width: 100%;
		background-size: cover;
		background-position: bottom;
		z-index: -1;
	}

	.top {
		width: 100%;
		height: 90rpx;
		background: black;
	}

	.content {
		height: 100vh;
		position: relative;
		top: 0;
		padding-top: 100rpx;
		box-sizing: border-box;
		left: 0;
		right: 0;
		z-index: 33;
		padding-bottom: 20rpx;
	}

	.data {
		font-size: 40rpx;
		font-family: PingFang SC;

		color: #2b2937;
		line-height: 27rpx;
	}

	.remark {
		width: 550rpx;
		margin-top: 46rpx;
		font-size: 23rpx;
		font-family: PingFang SC;

		color: #5d5d5d;
		line-height: 27rpx;
	}

	.title-box {
		width: 151rpx;
		height: 151rpx;
		margin: 0 auto;
	}

	.img {
		width: 151rpx;
		height: 151rpx;
		border-radius: 50%;
	}

	.litter-img {
		position: absolute;
		width: 46rpx;
		height: 46rpx;
		right: 0;
		bottom: 0;
	}

	.img-text {
		margin: 20rpx 0rpx 0rpx 110rpx;

		font-size: 23rpx;
		font-family: PingFang SC;

		color: #5d5d5d;
		line-height: 27rpx;
	}

	.curSex {
		color: #6ac7fc !important;
	}

	.sex {
		display: flex;
		flex-wrap: wrap;
		margin-top: 35rpx;
	}

	.sex-all {
		font-size: 28rpx;
		font-family: PingFang SC;

		color: #1a1a1a;
		padding-left: 37rpx;
	}

	.classify {
		display: flex;
		flex-wrap: wrap;
	}

	.sexAll {
		display: flex;
		flex-wrap: wrap;
		margin: 40rpx 0rpx 0rpx 60rpx;
		width: 80rpx;
		height: 40rpx;
		border-radius: 15rpx;
	}

	.nan {
		width: 30rpx;
		height: 30rpx;
	}

	.classify-text {
		font-size: 23rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #c5c6cb;
		line-height: 27rpx;
		display: inline-block;
		margin-left: 14rpx;
	}

	.classify-text-after {
		font-size: 23rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #6ac7fc;;
		line-height: 27rpx;
		display: inline-block;
		margin-left: 14rpx;
	}

	.blank {
		width: 2rpx;
		height: 60rpx;
		margin: 10rpx 0rpx 0rpx 70rpx;
	}

	.name {
		margin: 0 auto;
		margin-top: 38rpx;
		display: flex;
		flex-wrap: wrap;
		width: 635rpx;
		height: 100rpx;
		border: 1rpx solid #F5F5F8;
		border-radius: 17rpx;
		position: relative;
		background: #FFFFFF;
	}

	.name-left {
		width: 27rpx;
		height: 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC;

		color: #1a1a1a;
		line-height: 27rpx;
		padding: 35rpx 0rpx 0rpx 37rpx;
	}

	.age-right {
		/* margin-left: 21rpx;*/
		padding-top: 38rpx;
	}

	.name-text {
		/* margin: 0rpx 0rpx 25rpx 17rpx; */
		font-size: 23rpx;
		font-family: PingFang SC;

		color: #1A1A1A;
		height: 100rpx;
		line-height: 85rpx;
		margin-left: 17rpx;
	}


	.blank1 {
		width: 397rpx;
		height: 2rpx;
		background: #eeeeee;
	}

	.age-text {
		font-size: 25rpx;
		font-family: PingFang SC;

		color: #d1cfdd;
		line-height: 27rpx;
	}

	.hint {
		font-size: 25rpx;
		font-family: PingFang SC;

		margin: 0 auto;
		margin-top: 32rpx;
		margin-left: 77rpx;
	}

	.save {
		width: 544rpx;
		height: 104rpx;
		background: #6ac7fc;
		box-shadow: 0rpx 3rpx 9rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 52rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}

	.activeSave {
		background-color:  #6ac7fc !important;
	}

	.save-text {
		margin: 37rpx 0rpx 0rpx 240rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ffffff;
		line-height: 27rpx;
		display: inline-block;
	}

	.uni-input {
		color: #1a1a1a;
		text-indent: 20rpx;
	}

	.uni-input1 {
		color: gray;
		text-indent: 20rpx;
	}

	.verificationCodeBtn {
		position: absolute;
		top: 16rpx;
		right: 22rpx;
		width: 126rpx;
		height: 68rpx;
		background:  #6ac7fc;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 38rpx;
		font-family: PingFang SC;

		color: #FFFFFF;
	}
</style>
